import React from 'react';
import { Button, Skeleton } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { fetchQueryWelcomeLetter } from '@/pages/EntryManage/services';
import { CHECK_OFFICE_GOODS } from './constants';
import styles from './index.less';

/**
 * 欢迎信
 * @param {Function} onJumpToStep
 */
const WelcomeLetter = ({ onJumpToStep, isPage = false }) => {
    const { loading, data = {} } = useRequest(fetchQueryWelcomeLetter, {
        ...defaultFormatResult
    });

    /**
     * 跳转至确认资产
     */
    const handleClick = () => {
        if (onJumpToStep) {
            onJumpToStep(CHECK_OFFICE_GOODS);
        }
    };

    return (
        <div className={styles.welcomeLetterWrapper}>
            <section className={styles.welcomeLetter}>
                {loading && <Skeleton paragraph={{ row: 8 }} />}
                <div
                    className={styles.welcomeLetterContent}
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: data?.letterContent || '' }}
                />
            </section>
            {isPage === false && (
                <footer className={styles.footerButton}>
                    <Button type="primary" onClick={handleClick} size="large" disabled={loading}>
                        确认资产信息
                    </Button>
                </footer>
            )}
        </div>
    );
};

export default WelcomeLetter;
